<template>
  <div>
    <!-- 活动的签到结果展示 -->
    <div v-if="channel == 'activity'">
      <div class="c-textAlign-c c-fs32 c-mt80 c-mb40">
        <div class="iconfont c-fc-green c-fs150">&#xe6eb;</div>
        <p class="c-fs36 theme-fc c-mt40 c-pb20 c-fw-b">签到成功&nbsp;&nbsp;X{{num}}</p>
        <p class="c-fs24 c-fc-gray" v-if="comeFrom != 'reservation'">请大家按秩序入场参加活动</p>
      </div>
      <div class="c-textAlign-c c-fs26 c-ph24 c-pt60 c-mb40">
        <span class="c-hh72 c-flex-row c-flex-center c-fc-white c-br36 c-w100 theme-bg" @click="goActivity">{{comeFrom == 'reservation' ? '返回我的约课' : '查看活动'}}</span>
      </div>
      <div class="c-textAlign-c c-fs26 c-fc-sblack" @click="showCode = true" v-if="comeFrom != 'reservation'">查看票号</div>
      <section v-if="clockInfo" class="c-flex-row c-flex-center c-pv40">
        <div class="line90"></div>
        <div class="c-fs20 c-fc-gray c-ml12">搭配学习</div>
        <i class="iconfont c-fs20">&#xe8dd;</i>
        <div class="c-ml12 line90"></div>
      </section>
      <section @click="goClockDetail" class="c-p c-mh24 c-pt40 c-pb30 c-bg-white c-br10 study-box" v-if="clockInfo">
        <img class="icon-study" src="@/assets/i/wap/activity/icon_span.png" alt="">
        <div class="c-flex-row c-hh100 c-aligni-center c-ph20">
          <div class="c-ww150 c-hh100 c-text-hidden c-br8 c-p">
            <div class="c-pa c-p-t0 c-p-l0 c-br-br8 c-flex-row c-flex-center c-translucent-balck60 c-fc-white c-fs16 c-ph8 c-hh26">打卡</div>
            <img :src="$addXossFilter(clockInfo.cover, '')" alt="">
          </div>
          <div class="c-flex-grow1 c-w0 c-hh100 c-ph20 c-pt10 c-fs24 c-fw400 c-text-ellipsis2">
            <span>{{clockInfo.name}}</span>
          </div>
          <div class="c-fc-white c-fs20 c-flex-row c-flex-center c-ph16 c-hh36 c-lh c-br20 theme-bg">去打卡</div>
        </div>
      </section>
    </div>
    <!-- 约课的签到结果展示 -->
    <div v-else>
      <!-- 签到成功 -->
      <div v-if="from == 1" class="c-textAlign-c c-fs32 c-mv40">
        <div class="iconfont c-fc-green c-fs150">&#xe6eb;</div>
        <p class="c-fs40 c-fc-green c-mt40 c-pb30">签到成功</p>
        <p class="c-fs26 c-fc-gray c-pb20" v-if="groupName">您所属的分组是【{{groupName}}】</p>
        <p class="c-fs26 c-fc-gray">请大家按秩序入场参加课程</p>
      </div>
      <!-- 失败 -->
      <div v-else class="c-textAlign-c c-fs32 c-mv40">
        <div class="iconfont c-fc-red c-fs150">&#xe6e1;</div>
        <p class="c-fs40 c-fc-red c-mt40">签到失败</p>
        <p class="c-fs26 c-fc-xblack c-lh60">{{msg}}</p>
      </div>
      <div class="c-textAlign-c c-fs32">
        <span class="c-bd1-gray c-fs22 c-lh c-fc-gray c-br10 c-pv12 c-ph20 c-mr12" @click="goReservation">{{from==1||from==3 || from == 5?'查看详情':(from==2?'前往预约':'查看更多')}}</span>
      </div>
    </div>

    <!-- 查看票号 -->
    <cj-popup v-model="showCode" round>
      <div class="c-ww500 c-pb60 c-fs24 c-fc-xblack c-textAlign-l c-br20">
        <div class="c-flex-row c-justify-end">
          <div class="c-ww60 c-hh44 c-br-tr20 c-br-bl20 close-icon c-flex-row c-flex-center">
            <i @click="showCode = false" class="iconfont c-fc-white c-fs22">&#xe61b;</i>
          </div>
        </div>
        <p class="c-fs26 c-pb30 c-pl30">已签到成功票号</p>
        <div class="c-fs30 theme-fc c-fstyle-i c-textAlign-c c-fw-b c-contexty-scroll max270">
          <p class="c-pb20" v-for="(item, index) in ticketNo" :key="index">{{item | formatTicketNum}}</p>
        </div>
      </div>
    </cj-popup>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js"
export default {
  name: 'signResult',
  data() {
    return {
      activityId: 0,
      from: 0, // 0 成功 1：还未注册；2：活动不存在；3：还未报名；4：已签到
      rsId: null,
      channel: 'activity', // 来源
      groupName: '',
      msg: '', // 约课签到失败的原因
      clockInfo: null,
      showCode: false,
      ticketNo: "",
      num: 1,
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    }
  },
  components: {
  },
  created() {
    utilJs.appShare(this);
  },
  filters: {
    formatTicketNum(value) {
      if (value != undefined && value != '' && value != null) {
        if (/\S{5}/.test(value)) {
          return value.replace(/\s/g, '').replace(/(\d{4})(?=\d)/g, "$1 ");
        }
      } else {
        return value;
      }
    }
  },
  watch: {},
  methods: {
    //点击去打卡
    goClockDetail() {
      const toPath = `/homePage/clockIn/clockInDetail?clockInId=${this.clockInfo.id}`;
      this.$routerGo(this, "replace", { path: toPath });
    },
    //关联学习搭配
    getStudyList() {
      utilJs.getMethod(`${global.apiurl}matchRelate/getSlaveProduct?prodType=7&prodId=${this.activityId}`, (res) => {
        this.clockInfo = res.data || null;
      });
    },
    goActivity() {
      if (this.comeFrom == 'reservation') {
        this.$routerGo(this, "replace", {
          path: "/member/myReservation/reservationClassList",
          query: {}
        })
      } else {
        this.$routerGo(this, "replace", { path: `/activity/activityDetail`, query: { ActivityNo: this.activityId } })
      }
    },
    /**约课状态判断 1 签到成功 2 未预约 3重复签到 4该主题已被下架 5未购买*/
    goReservation() { // 跳转约课
      switch (this.from * 1) {
        case 1: case 3:
          // 跳转专场详情
          this.$routerGo(this, "replace", {
            path: "/activity/activityDetail",
            query: { ActivityNo: this.activityId, from: 'sectionInfo', rsId: this.rsId }
          });
          break;
        case 2: case 5:
          // 跳转主题详情
          this.$routerGo(this, "replace", {
            path: "/activity/activityDetail",
            query: { ActivityNo: this.activityId, from: 'reservation' }
          });
          break;
        case 4:
          // 跳转首页
          this.$routerGo(this, "replace", { path: '/' })
          break;
        default:
          this.$routerGo(this, "replace", { path: '/' })
          break;
      }
    },
    //分享
    wechatShare: function () {
      utilJs.wechatConfig("", "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      utilJs.appShareTrue("", "", "", "");
    }
  },
  activated() {
    this.from = this.$route.query.from;
    this.comeFrom = this.$route.query.comeFrom || '';
    this.activityId = this.$route.query.activityId;
    this.channel = this.$route.query.channel;
    this.groupName = this.$route.query.groupName || null;
    this.ticketNo = this.$route.query.ticketNo ? JSON.parse(this.$route.query.ticketNo) : "";
    this.num = this.$route.query.num || 1;
    this.rsId = this.$route.query.rsId;
    this.msg = this.$route.query.msg;
    this.clockInfo = null;
    this.showCode = false;
    if (this.from == 0) {
      this.getStudyList();
    }
    this.wechatShare();
    this.$store.commit('updateLoadingStatus', {
      isLoading: false
    });
  }
}
</script>
<style scoped>
.study-box {
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.08);
}
.icon-study {
  position: absolute;
  top: -0.6rem;
  left: -0.3rem;
  width: 2.7rem;
  height: 1.3rem;
  z-index: 2;
}
.line90 {
  width: 2.5rem;
  height: 1px;
  background: #e5e5e5;
}
.close-icon {
  background: rgba(0, 0, 0, 0.1);
}
.weui-icon_msg {
  font-size: 3.2rem;
}
.weui-icon-success {
  color: #44d76a;
}

.max270 {
  max-height: 6.75rem;
}
</style>